<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Exceed - Responsive Bootstrap Template</title>
        
       <!-- stylesheets -->
       <link rel="stylesheet" type="text/css" href="/bootstrap/css/common.css"/>
       <!-- ZUI 标准版压缩后的 CSS 文件 -->
       <link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.1/css/zui.min.css">
       <!-- ZUI Javascript 依赖 jQuery -->
       <script src="//cdn.bootcss.com/zui/1.9.1/lib/jquery/jquery.js"></script>
       <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
       <script src="//cdn.bootcss.com/zui/1.9.1/js/zui.min.js"></script>
       
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <link href="/css/font-awesome.css" rel="stylesheet">
       <link href="/css/ionicons.css" rel="stylesheet">
       <!-- <link href="css/linea.css" rel="stylesheet"> -->
       <link href="/css/owl.carousel.css" rel="stylesheet">
       <link href="/css/style.css" rel="stylesheet">
       
       <link rel="stylesheet" type="text/css" href="/css/style2.css" />
       <script type="text/javascript" src="/js/modernizr.custom.28468.js"></script>
       
       <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200i,300,300i,400,600,700,700i,900" rel="stylesheet">
       <link href="https://fonts.googleapis.com/css?family=Cardo:400,400i,700" rel="stylesheet">
       <link href="https://fonts.googleapis.com/css?family=Cardo:400,400i,700" rel="stylesheet">
    </head>
    <body>
        <!-- navbar -->
		<header>
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container nav-search">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="index">Exceed</a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse nav-top">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="index">首页</a></li>
                        	<li><a href="articleSort">文章</a></li>

                            <li  th:if="${session.name==null}"><a href="contact">登录|注册</a></li>
                            <li  th:if="${session.name!=null}"><a class="iconfont icon-wodexuanzhong" th:text="${session.name}" href="home"></a></li>
                            <li><a href="about">关于我们</a></li>
                        </ul>
                    </div>
					<div class="search-top">
						<div class="input-group">
							<div class="input-control search-box search-box-circle has-icon-left has-icon-right search-example" id="searchboxExample">
								<input id="inputSearchExample3" type="search" class="form-control search-input" placeholder="搜索">
								<label for="inputSearchExample3" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
							</div>
							<span class="input-group-btn">
								<button class="btn btn-primary" type="button" style="height: 34px;">搜索</button>
							</span>
						</div>
					</div>
                </div>
            </nav>
		</header>
        
        
        <!-- header -->
        <section class="header">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="intro">
                            <h2 th:text="${article.title}"></h2>
                            <h3><span>Home</span>/<span>Blog Post</span></h3>
                        </div>  
                    </div>
                </div>
            </div>
        </section>
        
        <!-- blog -->
        <section class="about-more blog">
            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="blog-post single-post">
                            <div>
                                <img class="writer pull-left" src="/images/blog1.jpg" alt="" />
                                <h3>Written By <span th:text="${article.author}"></span></h3>
                                <!--<strong>10 Dec 2016</strong>-->
                                <strong th:text="${article.postTime}"></strong>
                            </div>
                            <!--<div class="post-img"><img class="img-responsive" src="/images/header_blog-post2.jpg" alt="#" /></div>-->
                            <p th:text="${article.title}" style="font-size: 25px; color: #0f0f0f;margin-left: 300px"></p>
                            <p th:utext="${article.text}"></p>
                            <div class="comments">
                                <h2>评论:</h2>
                                <div style="height: 400px;overflow: auto">
                                    <div class="single-comment"  th:each="discusse:${discusses}"  >
                                        <img class="writer pull-left" src="/images/blog1.jpg" alt="" />
                                        <h3>W3eden <span class="pull-right">Replay</span></h3>
                                        <strong th:text="${discusse.data}"></strong>
                                        <p th:text="${discusse.discuss}"></p>
                                    </div>
                                </div>
                                <!--<div th:if="${discusses.size()==0}">
                                    <p>暂无评论</p>
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>    
        
        <!-- contact -->
        <section class="contact send-comment">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-1">
                        <h2 class="text-left">我要评论:</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8 col-md-offset-1">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="sr-only"><i class="ion ion-chatbubbles"></i>Massage</label>

                                    <textarea class="form-control textarea dis" rows="5" placeholder="Type your message here..."></textarea>

                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group ">
                <button type="button" th:artid="${article.id}" class="btn btn-default add">发表评论</button>
                                </div>
                            </div>
                            <script>

                                $(".form-group>.add").click(function(){
                                    // location.href="addDis?dis="+$(".dis").val()+"&artid="+$(this).attr("artid");
                                    $.ajax({
                                        url:"addDis",
                                        type:"POST",
                                        data:{
                                            dis:$(".dis").val(),
                                            artid:$(this).attr("artid")
                                        },
                                        success:()=>{
                                            var div=  $("<div>添加成功</div>");
                                            div.css({
                                                "position":"fixed",
                                                "left":"50%",
                                                top:"30%",
                                                width:"150px",
                                                height:"100px",
                                                "background-color":"skyblue",
                                                color:"black",
                                                "font-size":"20px",
                                                "transform":"translate(-50%,-50%)",
                                                "border-radius":"4px",
                                                "line-height":'100px',
                                                "text-align":"center"
                                            });
                                            $("body").append(div);
                                            setTimeout(function(){
                                                div.remove();
                                                location.href="detail?id="+$(".form-group>.add").attr("artid");
                                            },1000)

                                        }
                                    })
                                })
                            </script>

                        </div>    
                    </div>
                </div>
            </div>
        </section>
        
        <!-- footer -->
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-2  col-sm-3 col-xs-6">
                        <div class="footer-logo">
                            <div class="footer-logo-text">Exceed</div>
                            <p>Powered By Download Manager</p>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-3 col-xs-6">
                        <h3>Links</h3>
                        <ul class="list-unstyled links">
                            <li>About</li>
                            <li>Services</li>
                            <li>History</li>
                            <li>Contact Us</li>
                        </ul>
                    </div>
                    <div class="col-md-2 col-sm-3 col-xs-6">
                        <h3>Pages</h3>
                        <ul class="list-unstyled links">
                            <li>About</li>
                            <li>Services</li>
                            <li>History</li>
                            <li>Contact Us</li>
                        </ul>
                    </div>
                    <div class="col-md-2 col-sm-3 col-xs-6">
                        <h3>Legal</h3>
                        <ul class="list-unstyled links">
                            <li>About</li>
                            <li>Services</li>
                            <li>History</li>
                            <li>Contact Us</li>
                        </ul>
                    </div>
                    <div class="col-md-2 col-sm-3 col-xs-6">
                        <h3>Social</h3>
                        <ul class="list-unstyled links">
                            <li><i class="ion ion-social-facebook"></i>facebok</li>
                            <li><i class="ion ion-social-twitter"></i>Twitter</li>
                            <li><i class="ion ion-social-linkedin"></i>Linkedin</li>
                            <li><i class="ion ion-social-googleplus"></i>Google+</li>
                        </ul>
                    </div>
                    <div class="col-md-2 col-sm-3 col-xs-6">
                        <h3>Contact</h3>
                        <ul class="list-unstyled links">
                            <li>554A, Comflare </li>
                            <li>Avenue</li>
                            <li>01234 567 890</li>
                            <li>hi@comflare.com</li>
                        </ul>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-12">
                        <div class="copyright">
                            <p class="text-center" >&copy;Designed By Scripteden 2016 / More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
                            <!--ul class="list-inline pull-right">
                                <li>Privacy Policy </li>
                                <li>Terms Of Use</li>
                            </ul-->
                        </div>
                    </div>
                </div>    
            </div>
        </footer>
        
        <!-- javascript -->
        <script src="/js/jquery-v1.11.3.js"></script>
		<script src="/bootstrap/js/bootstrap.min.js"></script>
		<script src="/js/owl.carousel.js"></script>
		<script src="/js/isotope.pkgd.js"></script>
        <script type="text/javascript" src="/js/jquery.cslider.js"></script>
		<script src="/js/custom.js"></script>
    </body>
</html>        